<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小小躲避游戏</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            color: white;
        }
        
        .game-container {
            text-align: center;
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
        }
        
        canvas {
            border: 2px solid white;
            border-radius: 10px;
            background: #1a1a2e;
            display: block;
            margin: 10px auto;
        }
        
        .score {
            font-size: 24px;
            margin: 10px 0;
            font-weight: bold;
        }
        
        .controls {
            margin: 15px 0;
        }
        
        button {
            background: #667eea;
            color: white;
            border: none;
            padding: 12px 24px;
            font-size: 16px;
            border-radius: 25px;
            cursor: pointer;
            margin: 5px;
            transition: all 0.3s ease;
        }
        
        button:hover {
            background: #764ba2;
            transform: translateY(-2px);
        }
        
        .instructions {
            font-size: 14px;
            margin: 10px 0;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1>小小躲避游戏</h1>
        <div class="score">
            <div>当前分数: <span id="currentScore">0</span></div>
            <div>最高分: <span id="highScore">0</span></div>
        </div>
        <canvas id="gameCanvas" width="400" height="600"></canvas>
        <div class="controls">
            <button id="startBtn" onclick="startGame()">开始游戏</button>
            <button id="pauseBtn" onclick="pauseGame()" style="display: none;">暂停</button>
            <button onclick="resetGame()">重新开始</button>
        </div>
        <div class="instructions">
            使用 ← → 方向键或 A/D 键控制角色躲避下落的障碍物
        </div>
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const startBtn = document.getElementById('startBtn');
        const pauseBtn = document.getElementById('pauseBtn');
        
        let gameRunning = false;
        let gamePaused = false;
        let score = 0;
        let highScore = localStorage.getItem('highScore') || 0;
        let player = {
            x: canvas.width / 2 - 15,
            y: canvas.height - 60,
            width: 30,
            height: 30,
            speed: 5
        };
        let obstacles = [];
        let obstacleSpeed = 3;
        let obstacleFrequency = 60;
        let frameCount = 0;
        let keys = {};

        // 更新分数显示
        document.getElementById('highScore').textContent = highScore;

        // 键盘事件监听
        document.addEventListener('keydown', (e) => {
            keys[e.key.toLowerCase()] = true;
        });

        document.addEventListener('keyup', (e) => {
            keys[e.key.toLowerCase()] = false;
        });

        // 创建障碍物
        function createObstacle() {
            const width = Math.random() * 60 + 20;
            const x = Math.random() * (canvas.width - width);
            obstacles.push({
                x: x,
                y: -20,
                width: width,
                height: 20,
                color: `hsl(${Math.random() * 360}, 70%, 50%)`
            });
        }

        // 更新游戏状态
        function update() {
            if (!gameRunning || gamePaused) return;

            // 移动玩家
            if ((keys['arrowleft'] || keys['a']) && player.x > 0) {
                player.x -= player.speed;
            }
            if ((keys['arrowright'] || keys['d']) && player.x < canvas.width - player.width) {
                player.x += player.speed;
            }

            // 创建障碍物
            frameCount++;
            if (frameCount % obstacleFrequency === 0) {
                createObstacle();
            }

            // 更新障碍物
            obstacles.forEach((obstacle, index) => {
                obstacle.y += obstacleSpeed;
                
                // 检测碰撞
                if (checkCollision(player, obstacle)) {
                    gameOver();
                }

                // 移除超出屏幕的障碍物
                if (obstacle.y > canvas.height) {
                    obstacles.splice(index, 1);
                    score += 10;
                    document.getElementById('currentScore').textContent = score;
                    
                    // 增加难度
                    if (score > 0 && score % 100 === 0) {
                        obstacleSpeed += 0.5;
                        obstacleFrequency = Math.max(30, obstacleFrequency - 5);
                    }
                }
            });
        }

        // 碰撞检测
        function checkCollision(rect1, rect2) {
            return rect1.x < rect2.x + rect2.width &&
                   rect1.x + rect1.width > rect2.x &&
                   rect1.y < rect2.y + rect2.height &&
                   rect1.y + rect1.height > rect2.y;
        }

        // 绘制游戏
        function draw() {
            // 清空画布
            ctx.fillStyle = '#1a1a2e';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 绘制玩家
            ctx.fillStyle = '#00ff88';
            ctx.fillRect(player.x, player.y, player.width, player.height);
            
            // 绘制玩家眼睛
            ctx.fillStyle = '#000';
            ctx.fillRect(player.x + 5, player.y + 5, 5, 5);
            ctx.fillRect(player.x + 20, player.y + 5, 5, 5);

            // 绘制障碍物
            obstacles.forEach(obstacle => {
                ctx.fillStyle = obstacle.color;
                ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
            });

            // 游戏暂停提示
            if (gamePaused) {
                ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = 'white';
                ctx.font = '30px Arial';
                ctx.textAlign = 'center';
                ctx.fillText('游戏暂停', canvas.width / 2, canvas.height / 2);
            }

            // 游戏结束提示
            if (!gameRunning && score > 0) {
                ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = 'white';
                ctx.font = '30px Arial';
                ctx.textAlign = 'center';
                ctx.fillText('游戏结束', canvas.width / 2, canvas.height / 2 - 30);
                ctx.font = '20px Arial';
                ctx.fillText(`最终分数: ${score}`, canvas.width / 2, canvas.height / 2 + 10);
            }
        }

        // 游戏循环
        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

        // 开始游戏
        function startGame() {
            gameRunning = true;
            gamePaused = false;
            startBtn.style.display = 'none';
            pauseBtn.style.display = 'inline-block';
            gameLoop();
        }

        // 暂停游戏
        function pauseGame() {
            gamePaused = !gamePaused;
            pauseBtn.textContent = gamePaused ? '继续' : '暂停';
        }

        // 游戏结束
        function gameOver() {
            gameRunning = false;
            startBtn.style.display = 'inline-block';
            pauseBtn.style.display = 'none';
            
            if (score > highScore) {
                highScore = score;
                localStorage.setItem('highScore', highScore);
                document.getElementById('highScore').textContent = highScore;
            }
        }

        // 重置游戏
        function resetGame() {
            gameRunning = false;
            gamePaused = false;
            score = 0;
            obstacles = [];
            frameCount = 0;
            obstacleSpeed = 3;
            obstacleFrequency = 60;
            player.x = canvas.width / 2 - 15;
            
            document.getElementById('currentScore').textContent = score;
            startBtn.style.display = 'inline-block';
            pauseBtn.style.display = 'none';
            
            draw();
        }

        // 初始化
        draw();
    </script>
</body>
</html>
